<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/onestopshopping.css">
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../img/header/font_krll51qayrn/iconfont.css">
    <link rel="stylesheet" type="text/css" href="../css/base-clear.css" />
</head>

<body>
    <div class="header-container"></div>
    <main>
        <div class="main-center">
            <ul class="ul1">
                <li class="show0"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <ul class="ul2">
                <li>
                    <img src="../img/onestopshopping/1f1.jpg" alt="">
                    <img src="../img/onestopshopping/1f2.gif" alt="">
                </li>
                <li>
                    <img src="../img/onestopshopping/2f1.jpg" alt="">
                    <img src="../img/onestopshopping/2f2.jpg" alt="">
                    <img src="../img/onestopshopping/2f3.jpg" alt="">
                    <img src="../img/onestopshopping/2f4.jpg" alt="">
                </li>
                <li>
                    <img src="../img/onestopshopping/3f1.jpg" alt="">
                    <img src="../img/onestopshopping/3f2.jpg" alt="">
                    <img src="../img/onestopshopping/3f3.jpg" alt="">
                </li>
                <li>
                    <img src="../img/onestopshopping/4f1.jpg" alt="">
                    <img src="../img/onestopshopping/4f2.jpg" alt="">
                </li>
            </ul>
        </div>
    </main>
    <div class="footer-container"></div>
    <script src="../js/tool.js"></script>



    <script src="../libs/jquery.min.js"></script>
    <script src="../js/onestopshopping.js"></script>
    <script>
        $('.header-container').load('./header.html', function () {
            new Total()
            let cat = $('.cat-list')[0]
            let fl = $('.sp-navigation-center-left ul >li')[0]
            let navigation = $('.sp-navigation')[0]
            let h = navigation.offsetTop
            let li = $('.cart-list-ul >li')
            let page = $('.son-page')

            window.onscroll = () => {
                let sh = $(document).scrollTop()
                if (sh >= h) {
                    $(navigation).css({
                        position: 'fixed',
                        top: 0,
                        backgroundColor: 'white',
                        borderBottom: "1px solid black"
                    })
                }
                if (sh <= h) {
                    $(navigation).css({
                        position: 'static',
                        borderBottom: "none"
                    })
                }
            }

            for (let i = 0; i < li.length - 1; i++) {
                li[i].onmouseover = () => {
                    page[i].style.display = 'flex'
                    $(li[i]).css({
                        width: '250px',
                        height: '12.5%',
                        background: "#e3193a url(../img/header/cat-list-right1.jpg) no-repeat 214px 21px"

                    })

                    $($(li[i]).children()[0]).css({
                        color: 'white'
                    })

                    $($($(li[i]).children()[0]).children()[0]).css({
                        color: 'white'
                    })

                    $($(li[i]).children()[1]).children().css({
                        color: '#f1abb1'
                    })
                }

                li[i].onmouseout = () => {
                    page[i].style.display = 'none'
                    $(li[i]).css({
                        width: '100%',
                        height: '12.5%',
                        background: " white url(../img/header/cat-list-right.jpg) no-repeat 209px 21px"

                    })
                    $(li[i]).css({
                        backgroundColor: 'white'
                    })
                    $($(li[i]).children()[0]).css({
                        color: '#515151'
                    })
                    $($($(li[i]).children()[0]).children()[0]).css({
                        color: 'red'
                    })
                    $($(li[i]).children()[1]).children().css({
                        color: '#999'
                    })
                }
                page[i].onmouseover = () => {
                    cat.style.display = 'block'
                }
                page[i].onmouseout = () => {
                    cat.style.display = 'none'
                }
            }

            cat.style.display = 'none'
            fl.onmouseover = () => {
                cat.style.display = 'block'
            }

            let search = $('.search-center-center input')[0]
            let ul = $('.search-data')[0]
            ul.style.display = 'none'
            search.onkeyup = () => {
                ul.innerHTML = ''
                ul.style.display = 'none'

                const ipt = search.value
                let wd = ipt
                if (wd.trim().length == 0) {
                    ul.innerText = ''
                    return
                }

                $.ajax({
                    url: `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?&wd=${wd}`,
                    type: 'get',
                    dataType: 'jsonp',
                    success(res) {
                        let data = res.s
                        data.forEach(item => {
                            ul.innerHTML += `
                            <li>${item}</li>
                            `
                        });
                        ul.style.display = 'block'
                        if (!data.length) {
                            ul.style.display = 'none'
                        }

                    },
                    //注意点：这个就是给后端传递的要返回的函数名称
                    jsonp: 'cb'

                })
            }

            document.onclick = () => {
                let res = ul.style.display
                if (res == 'block') {
                    ul.style.display = 'none'
                }
            }


            let userInfo = JSON.parse(localStorage.getItem('up')) || []
            let out = $('.goout')[0]
            let gwc = $('.sp-navigation-center-right-cart a')[0]
            let gwc1 = $('.gwc')[0]

            if (userInfo.length != 0) {
                $('.username')[0].style.display = 'block'
                $('.goout')[0].style.display = 'block'
                $('.username span')[0].innerText = userInfo[0]
                $('.login')[0].style.display = 'none'
                $('.txt')[0].style.display = 'none'
                $('.register')[0].style.display = 'none'
                gwc.href='http://127.0.0.1:2113/html/cart.html'
                gwc1.href='http://127.0.0.1:2113/html/cart.html'

            } else {
                $('.username')[0].style.display = 'none'
                $('.goout')[0].style.display = 'none'
                $('.login')[0].style.display = 'block'
                $('.txt')[0].style.display = 'block'
                $('.register')[0].style.display = 'block'
                gwc.href='http://127.0.0.1:2113/html/login.html'
                gwc1.href='http://127.0.0.1:2113/html/login.html'

            }
            out.onclick = () => {
                localStorage.removeItem('up')
                localStorage.removeItem('cart')
                $('.username')[0].style.display = 'none'
                $('.goout')[0].style.display = 'none'
                $('.login')[0].style.display = 'block'
                $('.txt')[0].style.display = 'block'
                $('.register')[0].style.display = 'block'
                location.href = 'http://127.0.0.1:2113/html/login.html'
                return false
            }
        })
        $('.footer-container').load('./footer.html')
    </script>
</body>

</html>